<script src="http://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
<div id="app">

    <table>
        <tr>
            <th colspan="3">父组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{ name }}</td>
            <td><input ref="finput" type="text" v-model="name" /></td>
        </tr>
    </table>

    <my-component v-bind:my-name="name" @cname="[updatename,teste]"  ></my-component>
</div>

<template id="myComponent">
    <table>
        <tr>
            <th colspan="3">子组件数据</td>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ zname }}</td>
            <td><input ref="zinput" type="text" v-model="zname" v-on:input="upzname($event.target.value)"/></td>
        </tr>
    </table>
</template>

<script>
    window.onload = function () {
        var Bus = new Vue()
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'keepfool'
            },
            methods:{
                updatename : function (value) {
                    this.name=value;
                },
                teste : function(){
                    alert('teste');
                }
            },
            components: {
                'my-component': {
                    template: '#myComponent',
                    props: ['myName'],
                    methods:{
                        upzname : function(value){
                            this.$refs.zinput.value=value
                            this.$emit('cname',value);
                            this.$parent.name='haha'
                            //咋调都调不到那个实例里的updatename
                        }

                    },
                    computed: {
                        zname: function () {
                            return this.myName.trim().toLowerCase()
                        }
                    }
                }

            }
    })
    }
</script>